<template>
    <Row>
        <Col span="6" style="overflow:auto;padding:1em;">
            <p v-for="(item, key) in data" :key="key" @click="handleSelect(key)" :style="{backgroundColor:current_model_key==key?'#f8f8dd':'', cursor:'pointer'}">
                <span>{{key}}</span>
                <span style="color:#888;">{{item.Model.Description}}</span>
            </p>
        </Col>
        <Col span="18" style="border-left:1px solid #eee;overflow:auto;padding:1em;">
            <ul class="ivu-list">
                <li class="ivu-list-item">
                    <h3>模型介绍</h3>
                    <Table :data="modelTableData" :columns="model_columns" border></Table>
                </li>
                <li class="ivu-list-item">
                    <h3>对Web可见字段</h3>
                    <Table :data="webableFields" :columns="columns" border></Table>
                </li>
                <li class="ivu-list-item">
                    <h3>参与数据库存储字段</h3>
                    <Table :data="storageableFields" :columns="columns" border></Table>
                </li>
                <li class="ivu-list-item">
                    <h3>说明</h3>
                    <p><strong>Web可见字段：</strong>对于一个数据模型来说，有些字段可能不希望让浏览器用户看到，如密码是Web不可见的（Webable = false）</p>
                    <p><strong>参与数据库存储字段：</strong>数据模型的字段是否可存储到数据库，如用户是否登陆字段，是不希望存在数据库里的（Storageable = false）</p>
                    <p><strong>模型字段名与数据库字段名：</strong>模型字段名与数据库字段名是可以不一致的，这个时候需要指定它们的映射关系（FieldName = "your_database_field_name"）</p>
                    <p><strong>字段是否私有：</strong>这里的私有指的是，如果一个模型A的某个字段类型是另一个模型B，则访问不到B中的私有字段（IsPrivate = true），如果我们直接访问模型B，则没有此限制，所有的Web可见字段是都可以访问到的</p>
                </li>
            </ul>
        </Col>
    </Row>
</template>
<script>
export default {
    components: {
    },
    data() {
        return {
            data: {},
            current_model_key: "",
            model_columns: [
                { title: "数据模型名称", width: 120, render: (h, params) => {
                    return h("span", this.current_model_key);
                } },
                { title: "数据表名称", width: 120, key: "TableName" },
                { title: "描述", width: 300, key: "Description" },
                { title: "主键（数据表字段）名称", key: "PrimaryKey" },
                { title: "是否自增", key: "IdentityInsert" }
            ],
            columns: [
                { title: "模型字段名", width: 120, render: (h, params) => {
                    return h("span", params.row.PropertyInfo.Name);
                } },
                { title: "数据库字段名", width: 120, key: "FieldName"},
                { title: "描述", width: 300, key: "Description" },
                { title: "字段类型", width: 120, key: "DataType" },
                { title: "是否主键", key: "IsPrimaryKey" },
                { title: "默认值", key: "Default" },
                { title: "可否为空", key: "Nullable" },
                { title: "是否私有", key: "IsPrivate" }
            ]
        };
    },
    computed: {
        current_model() {
            if(this.current_model_key == "") return {};
            return this.data[this.current_model_key];
        },
        modelTableData() {
            var temp = [];
            if(!this.current_model.Model) return temp;
            return [this.current_model.Model];
        },
        webableFields() {
            var temp = [];
            if(!this.current_model.WebableFields) return temp;
            for(var key in this.current_model.WebableFields) {
                temp.push(this.current_model.WebableFields[key]);
            }
            return temp;
        },
        storageableFields() {
            var temp = [];
            if(!this.current_model.StorageableFields) return temp;
            for(var key in this.current_model.StorageableFields) {
                temp.push(this.current_model.StorageableFields[key]);
            }
            return temp;
        }
    },
    methods: {
        handleSelect(key) {
            this.current_model_key = key;
        }
    },
    created() {
        this.ajax.post("common/model_document").then( res => {
            this.data = res.data.data;
        });
    }
};
</script>

<style scoped>
</style>
